<template>
  <div>
    <div class="navbar">
      <van-nav-bar
        fixed
        placeholder
        safe-area-inset-top
        title="保证金"
        left-arrow
        @click-left="back"
      />
    </div>
    <div class="bao">
      <div>
        <div>{{ agent.cautionMoney }}</div>
        <div>
          <span>服务保证金（元）</span>
          <span
            ><van-icon size="12px" name="question-o" @click="showRule"
          /></span>
        </div>
      </div>
      <div>
        <button v-if="agent.cautionMoney == 0" @click="goPay">缴纳</button>
        <button v-if="agent.cautionMoney != 0" @click="goTui">申请退款</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { applyBond, bondList } from "@/apis/user";

export default {
  data() {
    return {
      order_id: "",
    };
  },
  created() {
    bondList().then((res) => {
      this.order_id = res.result.list[0].id;
    });
  },
  methods: {
    goTui() {
      applyBond({ order_id: this.order_id }).then((res) => {
        console.log(res);
        if (res.code == 201 || res.code == 200) {
          this.$router.push({ path: "wdsuccess" });
        } else {
          this.$toast("退款失败");
        }
      });
    },
    goPay() {
      this.$router.push("/buybond");
    },
    showRule() {
      this.$dialog
        .alert({
          message:
            "即服务质量保证金，该保证金是对经纪人服务水平及质量的有效保障，在符合相关要求的情况下该保证金可随时退还。",
          confirmButtonColor: "#45b7cb",
          messageAlign: "left",
          theme: "round-button",
          messageAlign:"left"
        })
        .then(() => {});
    },
    back() {
      this.$router.go(-1);
    },
  },
  computed: {
    ...mapGetters(["agent"]),
  },
};
</script>

<style lang="less" scoped>
.bao {
  margin: 20px 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  & > div:first-child {
    div:nth-child(1) {
      color: #d43b33;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 15px;
    }
    div:nth-child(2) {
      font-size: 13px;
      .van-icon {
        vertical-align: top;
      }
    }
  }
  & > div:nth-child(2) {
    button {
      width: 81px;
      height: 29px;
      color: #45b7cb;
      font-size: 15px;
      box-sizing: border-box;
      border: 1px solid #45b7cb;
      background-color: #fff;
      border-radius: 14px;
    }
  }
}
</style>